<template>
  <div id="address_container">
    <header-nav headTitle="Add Address" go-back="true"></header-nav>
    <form class="address_from">
      <p class="input"><span>name: </span><input type="text" name="name" v-model="name"></p>
      <p class="input"><span>Gender: </span><input type="radio" id="men" value="men" checked v-model="gender">
        <label for="men">Men</label><input type="radio" id="women" value="women" v-model="gender">
        <label for="women">Women</label></p>
      <p class="input"><span>Mobile: </span><input type="number" name="mobile" v-model="mobile"></p>
      <p class="input"><span>Email: </span><input type="email" name="email" v-model="email"></p>
      <p class="input"><span>Address: </span><input type="text" name="address" v-model="address"></p>
      <p class="input"><span>Default: </span><input type="checkbox" id="is_active" v-model="is_active">
        <label for="is_active">As default address </label></p>
      <div class="update_address" v-if="address_id && user_id">
        <button class="login_btn" @click.prevent="updateAddress()">Update Address</button>
        <button class="login_btn red" @click.prevent="deleteAddress()">Delete Address</button>
      </div>
      <button class="login_btn" @click.prevent="addAddress()" v-else>Add Address</button>
    </form>
    <alert-tip v-show="showAlert" :alertText="alertText" @closeTip="closeTip"></alert-tip>
  </div>
</template>

<script>
  import {mapState, mapMutations} from 'vuex'
  import HeaderNav from '../../components/HeaderNav.vue'
  import AlertTip from '../../components/AlertTip.vue'
  import { addAddress, getAddressById, deleteAddress, updateAddress } from '../../service/getData'
  import { getStore } from '../../config/mUtils'
  export default {
    data() {
      return {
        showAlert: false,
        alertText: null,
        addressData: [],
        address_id: '',
        user_id: '',
        name: '',
        gender: '',
        mobile: '',
        email: '',
        address: '',
        is_active: true
      }
    },
    components: {
      HeaderNav,
      AlertTip
    },
    created() {
    	this.initData()
    },
    methods: {
      ...mapMutations([
        'OUT_LOGIN', 'RECORD_USERINFO'
      ]),
      async initData() {
        this.user_id = this.$route.query.user_id
        this.address_id = this.$route.query.address_id
      	if(this.user_id && this.address_id) {
            await getAddressById(this.user_id, this.address_id ).then(res => {
            	this.name = res.data.name
            	this.gender = res.data.gender
            	this.mobile = res.data.mobile
            	this.email = res.data.email
            	this.address = res.data.address
            	this.is_active = res.data.is_active
            })
        }
      },
      async addAddress() {
        let user_id = Number(getStore('user_id'))
        await addAddress(user_id, this.name, this.gender, this.mobile, this.email, this.address, this.is_active).then(res => {
        	if(res.data.status == 0) {
            this.showAlert = true
            this.alertText = res.data.message
          } else {
            this.$router.push('/profile')
          }
        })
      },
      async updateAddress() {
        await updateAddress(this.user_id, this.address_id, this.name, this.gender, this.mobile, this.email, this.address, this.is_active).then(res => {
          if(res.data.status == 0) {
            this.showAlert = true
            this.alertText = res.data.message
          } else {
            this.$router.push('/profile')
          }
        })
      },
      async deleteAddress() {
      	await deleteAddress(this.user_id, this.address_id).then(res => {
          if(res.data.status == 0) {
            this.showAlert = true
            this.alertText = res.data.message
          } else {
            this.$router.push('/profile')
          }
        })
      },
      closeTip() {
        this.showAlert = false;
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../style/mixin';
  #address_container {
    padding-top: 1.9rem;
    @include sc(0.65rem , #434343);
  }
  .address_from {
    width: 90%;
    padding: 0.6rem 0;
    margin: 0 auto;
    .input {
      padding-bottom: 0.6rem;
      @include fj;
      align-items: center;
      justify-content: flex-start;
      span {
        display: inline-block;
        padding-right: 0.5rem;
        width: 20%;
      }
      input {
        font-size: 0.65rem;
        line-height: 1.15rem;
        height: 1.15rem;
        border: 1px solid #acacac;
      }
    }
  }
  .login_btn {
    display: block;
    width: 100%;
    margin: 0 auto;
    background-color: #7ec801;
    text-transform: uppercase;
    color: #fff;
    height: 1.62962rem;
    line-height: 1.62962rem;
    font-size: 0.63703rem;
    text-align: center;
    margin-top: 0.66667rem;
    font-family: Helvetica, arial;
    border-radius: 10px;
  }
  .red {
    background-color: #cc0000;
  }
</style>
